import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    TextInput,
    Image,
    FlatList,
    ScrollView,
    InteractionManager,
    Animated,
    TouchableOpacity, TouchableHighlight, ViewStyle
} from 'react-native'
import {inject, observer} from "mobx-react";
import {Actions} from "react-native-router-flux";
import {AppIcon} from "../../assets/icon/AppIcon";
import {callPhone, validObjHasEmpty} from "../../util";
import {Store} from "../../store";
import styles from "../../style";
import Icon from "react-native-vector-icons/Entypo";

interface ConcatUsProps extends Store {
}

interface ConcatUsState {

}

interface InfoItemProps {
    icon: string,
    label: string,
    content: string,
    color?: string,
    onPress?: () => void
}

function InfoItem(props: InfoItemProps) {
    const {icon, label, content, onPress, color} = props;
    if (validObjHasEmpty(props,"onPress")) return <View/>;

    return (<TouchableOpacity onPress={onPress} activeOpacity={.8} style={{marginTop: 31, paddingHorizontal: 11}}>
        <View style={[styles.flexDirectionRowNotFlex, styles.centerH]}>
            <Icon name={icon} size={17} color={color||"#000"}/>
            <Text style={{marginLeft: 12, color: "#333333", fontSize: 15}}>{label}</Text>
        </View>
        <Text style={{marginTop: 9, lineHeight: 20, fontSize: 13, color: "#999999"}}>{content}</Text>
    </TouchableOpacity>)
}

@inject("company")
@observer
export default class ConcatUs extends Component<ConcatUsProps, ConcatUsState> {
    async componentDidMount() {
        await this.props.company.getProfile();
    }

    render() {
        const {company} = this.props.company;
        const {
            phoneCustomerService,
            phoneLogistics,
            phoneInvestment,
            companyAddress,
            companyIntroduction
        } = company;
        return (<View style={ConcatUsStyles.container}>
            <InfoItem icon={"old-phone"} content={phoneCustomerService} label={"客服电话"}
                      color={"#cc403b"}
                      onPress={() => callPhone(phoneCustomerService)}
            />
            <InfoItem icon={"old-phone"} content={phoneLogistics} label={"物流电话"}
                      color={"#cc403b"}
                      onPress={() => callPhone(phoneLogistics)}
            />
            <InfoItem icon={"old-phone"} content={phoneInvestment} label={"招商电话"}
                      color={"#cc403b"}
                      onPress={() => callPhone(phoneInvestment)}
            />
            <InfoItem icon={"location-pin"} content={companyAddress}
                      color={"#1a98cc"}
                      label={"公司地址"}/>
            <InfoItem icon={"classic-computer"} content={companyIntroduction}
                      color={"#cc9611"}
                      label={"公司介绍"}/>
        </View>)
    }
}


const ConcatUsStyles = StyleSheet.create({
    container: {flex: 1, backgroundColor: "#fff"}
});
